import './ModalseeA.css'
import Roter from '../Rater'
import React, { useState } from 'react';
import { Modal, Button } from 'antd'
function ModalseeA(props) {
    console.log(props);
    // 查看
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 模态框title
    const CustomTitle = () => {
        return (
            <div className='CustomTitle_title'>
                查看
            </div>
        )
    }
    return (
        <div>
            <a onClick={showModal}>查看</a>
            <Modal cancelText='取消' okText='确认' width="715px" title={<CustomTitle></CustomTitle>} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
                footer={[
                    <Button id="ModalseeS2Btn1" key="back" onClick={handleCancel}>返回</Button>,
                    <Button id="ModalseeS2Btn2" key="submit" type="primary" onClick={handleOk}>
                        确认
                    </Button>,]}
            >
                <div className="ModalseeA">
                    <div className="ModalseeA_c1">
                        <p>订单编号</p>
                        <p>ID</p>
                        <p>姓名</p>
                        <p>服务类型</p>
                        <p>陪护员</p>
                        <p>评分</p>
                        <p>服务时长</p>
                        <p>服务态度</p>
                        <p>专业程度</p>
                        <p className="ModalseeA_c1_c">内容</p>
                    </div>
                    <div className="ModalseeA_c2">
                        <p>{props.content.OrderNo}</p>
                        <p>{props.content.ID}</p>
                        <p>{props.content.Name}</p>
                        <p>{props.content.Servicetype}</p>
                        <p>{props.content.Chaperone}</p>
                        <div className="ModalseeA_c2_div"><Roter/></div>
                        <p>{props.content.ServiceDuration}</p>
                        <p>{props.content.ServiceAttitude}</p>
                        <p>{props.content.ProfessionalLevel}</p>
                        <div className="ModalseeA_c2_c">
                            <p>{props.content.conten.speak}</p>
                            <img src={props.content.conten.Img} alt="" />
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    )
}
export default ModalseeA